<template>
  <div id="login-index">
    <h1>基于Threejs的<span>智慧工厂数据可视化展示系统</span></h1>
<div class="login-box">
  <el-form :model="Form" :rules="rules" ref="form" class="form">
    <el-form-item prop="mobile">
			<input type="text" class="text"  v-model="Form.mobile" style="background: #fff;height: 50px;background: #e6e6e6;color: #000;padding: 15px 11px 20px 16px;">
    </el-form-item>
    <el-form-item prop="password">
			<input type="password" v-model="Form.password" style="background: #fff;height: 50px;background: #e6e6e6;color: #000;">
    </el-form-item>
    </el-form>
		<div class="remember">
			<h4>Forgot your password?<a href="#">Click here.</a></h4>
		</div>
		<div class="clear"> </div>
		<div class="btn">
			<input type="submit"  @click="submit" value="LOG IN" style="color: #fff;">
		</div>
		<div class="clear"> </div>
</div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      Form: {
        mobile: '钟工',
        password: '123456'
      },
      rules: {
        mobile: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            pattern:  /^[\w\u4e00-\u9fcc]{2,20}/,
            // @"^[\u4E00-\u9FA5]{2,4}$"
            message: '请输入2-20位汉字或英文的用户名',
            trigger: 'change'
          }
        ],
        password: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 6,
            max: 12,
            message: '请输入6-12位密码',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    submit(){
      this.$refs.form.validate(async(result) => {
        if(result){
          this.$store.commit('login/SETTOKEN','dqggw14wreggasf3')
          this.$store.commit('login/SETNAME',this.Form)
          this.$router.push('/dashboard')
          this.$message.success('登录成功')
          localStorage.setItem('name',this.$store.state.login.name)
        }else{
          this.$message.success('请填写正确的账号密码')
        }
      })
    }
  },
}
</script>

<style scoped>

@import './css/style.css'

</style>
